.container-popup {
  visibility: hidden;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.popup-show {
  visibility: visible;
}

.popup-show .container-bg {
  display: block;
  opacity: 1;
}

.container-bg {
  opacity: 0;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  background: rgba(0, 0, 0, 0.4);
  transition: all 0.3s ease-in-out;
}

.popup-bg {
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 90;
}

.popup-content {
  position: absolute;
  z-index: 100;
  width: 100%;
  max-width: 100%;
  height: 100%;
}

.center {
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.left {
  display: flex;
  flex-direction: row;
  height: 100%;
}

.right {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  height: 100%;
}

.bottom {
  display: flex;
  flex-direction: column-reverse;
  width: 100%;
}

.popup-fade-center-active-show {
  animation: popup-center-fadein 0.4s;
}

.popup-fade-center-active-hide {
  animation: popup-center-fadeout 0.4s;
}

.popup-fade-top-active-show {
  animation:popup-top-fadein 0.3s ease-in-out;
}

.popup-fade-top-active-hide {
  animation:popup-top-fadeout 0.3s ease-in-out;
}

.popup-fade-right-active-show {
  animation: popup-right-fadein 0.3s ease-in-out;
}

.popup-fade-right-active-hide {
  animation: popup-right-fadeout 0.3s ease-in-out;
}

.popup-fade-left-active-show {
  animation: popup-left-fadein 0.3s ease-in-out;
}

.popup-fade-left-active-hide {
  animation: popup-left-fadeout 0.3s ease-in-out;
}

.popup-fade-bottom-active-show {
  animation: popup-bottom-fadein 0.3s ease-in-out;
}

.popup-fade-bottom-active-hide {
  animation: popup-bottom-fadeout 0.3s ease-in-out;
}

// .popup-fade-center-leave {
//   opacity: 0;
// }

@keyframes popup-center-fadein {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }

  50% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes popup-center-fadeout {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(0.8);
    opacity: 0;
  }
}

@keyframes popup-top-fadein {
  0% {
    transform: translate3d(0, -100%, 0);
    opacity: 0.1;
  }

  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes popup-top-fadeout {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }

  100% {
    transform: translate3d(0, -100%, 0);
    opacity: 0.1;
  }
}

@keyframes popup-left-fadein {
  0% {
    transform: translate3d(-100%, 0, 0);
    opacity: 0.1;
  }


  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes popup-left-fadeout {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }


  100% {
    transform: translate3d(-100%, 0, 0);
    opacity: 0.1;
  }
}


@keyframes popup-right-fadein {
  0% {
    transform: translate3d(100%, 0, 0);
    opacity: 0.1;
  }

  /* 50% {
    transform: translate3d(25%, 0,  0);
    opacity: 0.7;
  } */

  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes popup-right-fadeout {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }

  100% {
    transform: translate3d(100%, 0, 0);
    opacity: 0.1;
  }
}

@keyframes popup-bottom-fadein {
  0% {
    transform: translate3d(0, 100%, 0);
    opacity: 0;

  }


  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}


@keyframes popup-bottom-fadeout {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }


  100% {
    transform: translate3d(0, 100%, 0);
    opacity: 0.1;
  }
}
